import React from 'react';
import './Carousel.css';
import Bar from '../../Component/Bar';
import { Icon } from 'antd';
import ImageBox from '../../Component/ImageBox';
import Experts from "../../Server/Experts";
import HttpUtil from '../../utils/HttpUtil';

export default class Carousel extends React.Component {
    constructor(props){
        super();
        this.state={
            startIndex:0,   //图片起始位置
            showImgList:[], //图片列表
            imgResult:[],   //显示的图片代码
        }
        //专家列表
        Experts.HomeRecommendedExperts()
        .then(response=>{
            let imgList=[];
            response.data.forEach(i => {
                // console.log(i.expertsCertificationName)
                // console.log()
                let img=HttpUtil.GetResourceURL(i.expertsCertificationOneselfImg);
                imgList.push({name:i.expertsCertificationName,src:img});
            });
            this.setState({
                imgList:imgList
            },()=>{
                this.Genimg();
            })
            // console.log(response.data);
        });
    }
    Genimg(){
        let startIndex=this.state.startIndex;
        if(this.state.imgList.length<startIndex+2){
            return;
        }
        let imgData=this.state.imgList;
        let imgResult=[];
        imgResult.push(this.GenImgNodes(false,imgData[startIndex],2));
        imgResult.push(this.GenImgNodes(true,imgData[startIndex+1],3));
        imgResult.push(this.GenImgNodes(false,imgData[startIndex+2],4));
        this.setState({
            imgResult:imgResult
        })
    }
    GenImgNodes(isMiddle,imgData,id){
        if(isMiddle){
            return (
                <div key={id} className="Car_House_Content_BigBox">
                        <ImageBox width="250px" height="250px" src={imgData.src} msg={imgData.name} opacity="0.3"/>
                </div>
            );
        }
        else{
            return (
                <div key={id} className="Car_House_Content_LittleBox">
                    <ImageBox width="200px" height="200px" src={imgData.src} msg={imgData.name} opacity="0.3"/>
                </div>
            );
        }
    }
    //轮播图组件
    render(){
        return (
            <div className="Car_House">
                <div className="Car_House_Title">PIE EXPERT</div>
                <div>
                    <Bar color="#fff"/>
                    <span className="Car_House_Subtitle_l">派.专家</span>
                    <Bar color="#fff"/>
                </div>
                <div className="Car_House_Subtitle_s">公司介绍什么的公司介绍什么的公司介绍什么的公司介绍什么的公司介绍什么的公司介</div>
                <div className="Car_House_Content">
                    <div key={0} className="Car_House_Content_Left">
                        <Icon type="arrow-left" />
                    </div>
                    {this.state.imgResult}
                    <div key={100}  className="Car_House_Content_Right">
                        <Icon type="arrow-right" />
                    </div>
                </div>
            </div>
        );
    }
}
